<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="css/iconfont.css"/>
		<link rel="stylesheet" type="text/css" href="css/swiper-3.3.1.min.css"/>
		
		<style type="text/css">
			body,html{height: 100%;}
			#box{width: 640px;height: 100%;display: -webkit-box;-webkit-box-orient: vertical;}
			.header-top{width:100%;height:90px;position: relative;overflow: hidden;position: fixed;top: 0;}
			.car-shop{position: absolute;right: 35px;top: 24px;height: 50px;width: 104px;background:#c80f0d;border-radius: 14px 14px;}
			.top-middle{height: 90px;background: #a90506;position: relative;}
			.car-shop i{font-size: 40px;}
			.top-middle h2{text-align: center;line-height: 90px;color: #FFFFFF;font-size: 26px;}
			.foot{width:100%;position:fixed;bottom: 0;background: #a3a3a3;height: 100px;text-align: center;}
			.add-car{width: 436px;height: 80px;background: #b82221;line-height: 80px;margin:10px 0 0 100px;border-radius: 14px 14px;font-size: 25px;color: #fff;}
			.content{-webkit-box-flex: 1;margin-top: 90px;background: #f3eff0;}
			.swiper-container{height: 500px;position: relative;}
			.swiper-slide{height: 500px;}
			.swiper-slide img{text-align: center;height: 500px;width: 100%;}
			.pic-detail{height: 200px;padding-top: 30px;font-size: 28px;}
			.common-style {display:block;color:#464646;padding:36px 36px 0 36px;width: 600px;float: left;}
			.imgname{overflow: hidden;text-align: center;height: 64px;line-height: 64px;font-size: 30px;}
			.real-price{font-size: 24px;color: red;}
			.discount{padding-left: 20px;font-size: 20px;color: #4a4a4a;}
			.imgpeople{margin-top: 24px;}
			.watch-detail{margin-top:90px;height:100px;background: #fff;line-height: 100px;font-size: 30px;padding-left: 16px;}
			.watch-detail span{padding-left: 20px;}
			.watch-detail i{font-size: 40px;}
			.icon-right{float: right;padding-right: 20px;}
			
			
		</style>
	</head>
	<body>
		<div id="box">
			<header class="header-top">
				<div class="top-middle">
					 <h2>商品详情</h2>
					 <button class="car-shop"><i class="iconfont">&#xe61b;</i></button>
			    
				</div>
			</header>
			<section class="content">
				<div class="swiper-container">
					<div class="swiper-wrapper">
			   	   </div>
			   	    <!-- 如果需要分页器 -->
                 <div class="swiper-pagination"></div>
			  
				</div>
		   	  <div class="pic-detail">
		   	  	
		   	  </div>
		   	  <div class="watch-detail">
		   	  <a href="watch-detail.html">
		   	  		<i class="iconfont">&#xe61c;</i>
		   	  	<span>产看商品详情</span>
		   	  	<i class="iconfont icon-right">&#xe619;</i>
		   	  </a>
		   	  </div>
			</section>
			<footer class="foot">
				<div class="add-car">
					添加到购物车
				</div>
			</footer>
		</div>
		
	</body>
	<script type="text/javascript" src="js/jquery-2.0.3.js"></script>
	<script type="text/javascript" src="js/shopcar.js"></script>
	<script type="text/javascript" src="js/swiper-3.3.1.jquery.min.js"></script>
	<script type="text/javascript">
	
	$(function(){
		var c=localStorage.getItem("username")
		var b=sessionStorage.getItem("goodsID")
		console.log(b)
		shopCar($(".add-car"),b,1)
	    $.ajax({
	    	type:'GET',
			url:'http://datainfo.duapp.com/shopdata/getGoods.php',
			dataType:'jsonp',
			data:{goodsID:b,userID:c,},
			success:function(data){
				console.log(data.userID)
				$.each(data, function(index) {
					var de=JSON.parse(data[index].imgsUrl)
					$.each(de,function(i){
					var oSwiper=$("<div class='swiper-slide'></div>")
					var oImg=$('<img src="'+de[i]+'"/>')
					oSwiper.append(oImg)
					$(".swiper-wrapper").append(oSwiper)
					})
				  var oDiv1=$('<div class="imgname">'+data[index].goodsName+'</div>')
					var oDiv2=$("<div><span class='real-price'>￥"+data[index].price+"</span><span class='discount'>"+data[index].discount+"</span></div>")
					var  oDiv=$("<div class='common-style'></div>")
					var oDiv3=$('<div class="imgpeople">购买人数：'+data[index].buynumber+'</div>')
					oDiv.append(oDiv1)
					oDiv.append(oDiv2)
					oDiv.append(oDiv3)
					 $(".pic-detail").append(oDiv)
					 $(".watch-detail").on("click",function(){
			          sessionStorage.setItem("goodsID",data[index].goodsID)
		          })
				});
					var mySwiper = new Swiper ('.swiper-container', {
    loop: true,
    // 如果需要分页器
    pagination: '.swiper-pagination',
    })   
       
			}
	    })
		

    
	})
		function bodyScale(){
				var devicewidth=document.documentElement.clientWidth;
				var scale=devicewidth/640;
				document.body.style.zoom=scale;
			}
			window.onresize=window.onload=function(){
				bodyScale();
			}
	</script>
</html>
